<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>首页</title>
  <link rel="stylesheet" href="./static/css/layui.css" media="all">
  <link rel="stylesheet" href="./static/css/common.css">
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <script src="./static/layui.js"></script>
  <style>
    .header-content {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
    }

    .index-aside {
      margin-top: 10px;
    }

    .index-aside > ul {
      padding: 0;
      margin: 0;
    }

    .aside-list {
      height: 620px;
    }

    .index-main {
      margin-top: 10px;
      height: 600px;
    }
  </style>
</head>
<body>
<div>
  <div class="layui-row layui-col-xs12 layui-col-md12 index-header">
    <ul class="layui-nav" lay-bar="disabled">
      <div class="header-content">
        <div>
          <li class="layui-nav-item">
            <span>职工管理系统</span>
          </li>
        </div>
        <div>
          <li class="layui-nav-item" lay-unselect="">
            <a href="javascript:;"><img src="//t.cn/RCzsdCq" id="empImg" class="layui-nav-img"></a>
            <dl class="layui-nav-child">
              <dd style="text-align: center;"><a href="javascript:;" id="logoutBtn">退出</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="javascript:void(0);" id="empName">admin</a>
          </li>
        </div>

        <script>
          layui.use('jquery', function () {
            let $ = layui.$;
            let user = JSON.parse(window.localStorage.getItem("user"));
            console.log(user);
            $("#empImg").attr("src", "http://localhost:8080/StaffManagement/static/image/" + user.img);
            $("#empName").html(user.name);
          })
        </script>
      </div>
    </ul>
  </div>
  <div class="layui-row ">
    <div class="layui-col-md2 layui-col-xs2 index-aside">
      <ul class="layui-nav layui-nav-tree layui-inline aside-list" lay-filter="demo">
        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:;">员工管理</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:void(0);" class="route" router-link="employList.html">员工列表</a></dd>
            <dd><a href="javascript:;" class="route" router-link="employEdit.html">添加员工</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:void(0);">部门管理</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:void(0);" class="route" router-link="departmentList.html">部门列表</a></dd>
            <dd><a href="javascript:void(0);" class="route" router-link="departmentEdit.html">添加部门</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:void(0);">工资管理</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:void(0);" class="route" router-link="salaryList.html">工资列表</a></dd>
          </dl>
        </li>
      </ul>
    </div>
    <div class="layui-col-md10 layui-col-xs10 index-main">
      <div style="height: 100%">
        <div class="layui-panel" style="height: 100%">
          <div style="padding: 20px 20px;height: 90%">
            <iframe id="myFrame" src="employList.html" style="width: 100%; height: 100%;margin: 0;padding: 0;"
                    frameborder="0" scrolling="yes"></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  layui.use(['layer', 'form', 'jquery'], function () {
    var layer = layui.layer
      , form = layui.form
      , $ = layui.$;

    $(".route").bind("click", function () {
      let routerLink = $(this).attr("router-link");
      console.log(routerLink);
      if (routerLink.toLowerCase().indexOf("edit") >= 0) {
        let user = JSON.parse(window.localStorage.getItem("user"));
        console.log(user);
        if (user.role.roleName != "管理员") {
          swal("提示", "您没有该权限", "warning");
          return;
        }
      }
      $("#myFrame").prop("src", routerLink);

    })

    $("#logoutBtn").bind("click", () => {
      swal({
        title: "提示",
        text: "您确定要退出系统吗？",
        icon: "warning",
        buttons: true,
        dangerMode: true
      }).then(ok => {
        if (ok) {
          $.get("/StaffManagement/login/logout", "", data => {
            if (data.code == 200) {
              swal("提示", data.message, "info").then(() => {
                window.localStorage.removeItem("user");
                window.location.href = "http://localhost:8080/StaffManagement/login.html";
              })
            }
          })
        } else {
          swal("提示", "您做了一个明智的选择", "info");
        }
      })
    })
  });
</script>
</body>
</html>